<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客-编辑</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/common.css" th:href="@{/css/common.css}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="../../static/js/custom.js" th:src="@{/js/custom.js}"></script>
    <script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script src="../../static/js/edit-form-verify.js" th:src="@{/js/edit-form-verify.js}"></script>

    <link rel="stylesheet" href="../../static/lib/md/css/editormd.css"
          th:href="@{/lib/md/css/editormd.css}"/>
    <script src="../../static/lib/md/editormd.min.js" th:src="@{/lib/md/editormd.min.js}"></script>
    <script src="../../static/js/md.js" th:src="@{/js/md.js}"></script>
</head>
<body>
<!--导航-->
<nav th:replace="admin/fragment_manager::menu(0)">
    <div class="ui container">
        <!--stackable 表示可堆叠，自适应-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a class="active menu-item item mobile-hide" href="#"><i
                    class="teal code icon"></i>博客</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal idea icon"></i>分类</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal tags icon"></i>标签</a>
            <div class="right menu-item  mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui circular image"
                             src="http://xxstudy.cn/media/img/avatar_15.png"
                             style="vertical-align:middle">唐人
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--菜单按钮-->
    <a id="menu-toggle" class=" ui black icon button bar-position mobile-show" href="#">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--编辑-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a class="item  teal active" th:href="@{/admin/blogs/create}">写博客</a>
            <a class="item" th:href="@{/admin/blogs}">列表</a>
        </div>
    </div>
</div>

<!--中间内容-->
<div class="center-padding">
    <div class="ui container">
        <!--操作提示-->
        <div class="ui message" th:unless="${msg==null}"
             th:classappend="${msg.success}?'success':'error'">
            <i class="close icon"></i>
            <div class="header">提示</div>
            <p th:text="${msg.msg}">操作成功</p>
        </div>
        <form id="blog-form" th:object="${blog}" th:action="@{/admin/blogs}"
              action="#" method="post" class="ui form">
            <input type="hidden" name="published" th:value="*{published}">
            <input type="hidden" name="id" th:value="*{id}">
            <!--版权&标题框-->
            <div class="required field">
                <div class="ui left labeled input">
                    <!--版权-->
                    <div class="ui selection compact teal basic dropdown label">
                        <input type="hidden" value="原创" name="flag" th:value="*{flag}?:'原创'">
                        <i class="dropdown icon"></i>
                        <div class="text">原创</div>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>
                        </div>
                    </div>

                    <!--标题框-->
                    <input type="text" name="title" placeholder="标题" th:value="*{title}">
                </div>
            </div>

            <!--分类&标签-->
            <div class="two fields">
                <!--分类-->
                <div class="required field">
                    <div class="ui left labeled action input">
                        <div class="ui teal basic label">分类</div>
                        <div class="ui selection fluid dropdown">
                            <input type="hidden" name="category.id" th:value="${blog?.category?.id}">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="category:${categoryList}"
                                     th:data-value="${category.id}"
                                     th:text="${category.categoryName}"
                                     class="item" data-value="1">移动端
                                </div>
                                <!--/*-->
                                <div class="item" data-value="2">后端</div>
                                <!--*/-->
                            </div>
                        </div>
                    </div>
                </div>

                <!--标签-->
                <div class="required field">
                    <div class="ui left labeled action input">
                        <div class="ui teal basic label">标签</div>
                        <div class="ui selection multiple fluid dropdown">
                            <input type="hidden" name="tagIds" th:value="*{tagIds}">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div th:each="tag:${tagList}" th:data-value="${tag.id}"
                                     th:text="${tag.tagName}"
                                     class="item" data-value="1">Android
                                </div>
                                <!--/*-->
                                <div class="item" data-value="2">Java</div>
                                <!--*/-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--首图地址-->
            <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui teal basic label">首图</div>
                    <!--URL-->
                    <input type="text" name="imgUrl" th:value="*{imgUrl}" placeholder="首图引用地址URL">
                </div>
            </div>

            <!--编辑区域-->
            <div class="field fluid">
                <div id="blog-editor-md" style="z-index: 1 !important;">
                <textarea name="content" style="display:none;" th:utext="*{content}">[TOC]
 #### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...

```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
                </textarea>
                </div>
            </div>

            <!--概述-->
            <div class="required field">
                <textarea name="description" th:text="*{description}" placeholder="博客概述..." maxlength="200"></textarea>
            </div>

            <!--推荐&转载&赞赏&评论-->
            <div class="inline fields">
                <!--推荐-->
                <div class="field">
                    <div class="ui checkbox">
                        <input class="hidden" type="checkbox" id="recommend" name="recommendChecked" th:checked="*{recommendChecked}">
                        <label for="recommend">推荐</label>
                    </div>
                </div>

                <!--转载声明-->
                <div class="field">
                    <div class="ui checkbox">
                        <input class="hidden" type="checkbox" id="reprinted" name="copyrightChecked"  th:checked="*{copyrightChecked}">
                        <label for="reprinted">转载声明</label>
                    </div>
                </div>

                <!--转载声明-->
                <div class="field">
                    <div class="ui checkbox">
                        <input class="hidden" type="checkbox" id="appreciate" name="appreciateChecked"  th:checked="*{appreciateChecked}">
                        <label for="appreciate">赞赏</label>
                    </div>
                </div>

                <!--评论-->
                <div class="field">
                    <div class="ui checkbox">
                        <input class="hidden" type="checkbox" id="comment" name="commentChecked"  th:checked="*{commentChecked}">
                        <label for="comment">评论</label>
                    </div>
                </div>
            </div>

            <!--错误提示-->
            <div class="ui error message"></div>

            <div class="ui container right aligned">
                <button class="ui button" type="button" onclick="window.history.go(-1)">返回</button>
                <button id="save-btn" class="ui secondary button">保存</button>
                <button id="push-btn" class="ui teal button">发布</button>
            </div>

        </form>
    </div>
</div>
</body>
</html>